$(document).ready(function(){
	createHeader();
//	$("div").click(divClicked);
	addHoverEffect();
    $("a").click(function(e) {
        e.preventDefault();
    });
    
	$("div:not(#header)").dblclick(function(e){
		e.stopPropagation();
		createControlDiv(this);
	});
	
});
function addHoverEffect(){
	//adding hover effect
	$("div:not(#header)").hover(
			function (e) {
				e.stopPropagation();
				$(this).addClass("hover");
				}, 
			function () {
				$(this).removeClass("hover");
				}
			);
}

function createControlDiv(obj){
	$("div.dragDiv").removeClass("dragDiv");
	$("div.resizeDiv").removeClass("resizeDiv");
	var controlDiv = document.createElement("div");
	
	var drag = document.createElement("input");
	drag.value="Drag";
	drag.type="button";
	drag.className="drag";
	drag.onclick=function(e){e.stopPropagation();$(obj).addClass("dragDiv").draggable({containment: 'parent'});$("div#controlDiv").remove();}; 
	
	
	var resize = document.createElement("input");
	resize.value="Resize";
	resize.type="button";
	resize.className="resize";
	resize.onclick=function(e){e.stopPropagation();$(obj).addClass("resizeDiv").resizable({containment: 'parent'});$("div#controlDiv").remove();}; 
	
	var remove = document.createElement("input");
	remove.value="Remove";
	remove.type="button";
	remove.className="remove";
	remove.onclick=function(e){e.stopPropagation();$(obj).remove();$("div#controlDiv").remove();}; 
	
	var edit = document.createElement("input");
	edit.value="Edit";
	edit.type="button";
	edit.className="edit";
	edit.onclick=function(e){e.stopPropagation();$("div#controlDiv").remove();makeDivEditable(obj);};
	
	var cancel = document.createElement("input");
	cancel.value="Cancel";
	cancel.type="button";
	cancel.className="cancel";
	cancel.onclick=function(e){e.stopPropagation();$("div#controlDiv").remove();};
	
	var controlDiv = document.createElement("div");
	controlDiv.id="controlDiv";
	controlDiv.appendChild(drag);
	controlDiv.appendChild(resize);
	controlDiv.appendChild(remove);
	controlDiv.appendChild(edit);
	controlDiv.appendChild(cancel);
	$(obj).append(controlDiv);
}

function createHeader(){
	var header = document.createElement("div");
	header.id="header";
	
	var printPreview = document.createElement("input");
	printPreview.type="button";
	printPreview.value="Print Preview";
	printPreview.className="printPreview";
	printPreview.onclick=function(){
		$("div.dragDiv").removeClass("dragDiv");
		$("div.resizeDiv").removeClass("resizeDiv");
		$("div#controlDiv").remove();
	};
	
	var printButton = document.createElement("input");
	printButton.type="button";
	printButton.value="Print";
	printButton.className="print";
	printButton.onclick=function(){window.print();};
	
	header.appendChild(printPreview);
	header.appendChild(printButton);
	
	$("body").append(header);
}

var editing  = false;

if (document.getElementById && document.createElement) {
	var butt = document.createElement('BUTTON');
	var buttext = document.createTextNode('Done');
	butt.appendChild(buttext);
	butt.onclick = saveEdit;
}

function catchIt(e) {
	if (editing) return;
	if (!document.getElementById || !document.createElement) return;
	obj = e;
	while (obj.nodeType != 1) {
		obj = obj.parentNode;
	}
	if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;
	while (obj.nodeName != 'P' && obj.nodeName != 'DIV' && obj.nodeName != 'HTML') {
		obj = obj.parentNode;
	}
	if (obj.nodeName == 'HTML') return;
	var x = obj.innerHTML;
	var y = document.createElement('TEXTAREA');
	var z = obj.parentNode;
	z.insertBefore(y,obj);
	z.insertBefore(butt,obj);
	z.removeChild(obj);
	y.value = x;
	y.focus();
	editing = true;
}

function saveEdit() {
	var area = document.getElementsByTagName('TEXTAREA')[0];
	var y = document.createElement('P');
	var z = area.parentNode;
	y.innerHTML = area.value;
	z.insertBefore(y,area);
	z.removeChild(area);
	z.removeChild(document.getElementsByTagName('button')[0]);
	editing = false;
}

function makeDivEditable(obj){
	 $(obj).editable(function(value) {return(value);}, { 
	     type    : 'textarea',
	     submit  : 'OK',
	 });
}
